<template>
    <!-- 添加电影容器 -->
    <div class="movie-add-container">
        <!-- 标题 -->
        <h2 class="section-title">添加电影</h2>
        <!-- 输入组 -->
        <div class="input-group">
            <!-- 标题输入 -->
            <input v-model="newMovie.title" placeholder="电影标题" class="input-field" />
            <!-- 年份输入 -->
            <input v-model="newMovie.year" placeholder="上映年份" class="input-field" />
            <!-- 导演输入 -->
            <input v-model="newMovie.director" placeholder="导演" class="input-field" />
            <!-- 类型输入 -->
            <input v-model="newMovie.genre" placeholder="类型" class="input-field" />
            <!-- 添加按钮 -->
            <button @click="addMovie" class="add-button">
                添加
            </button>
        </div>
    </div>
</template>
<script setup>
// 引入 Vue 3 的响应式 API
import { ref } from 'vue';
// 定义组件触发的事件
const emits = defineEmits(['add-movie']);
// 响应式的新电影对象
const newMovie = ref({
    title: '',
    year: '',
    director: '',
    genre: ''
});
// 添加电影方法
const addMovie = () => {
    // 验证输入有效性
    if (newMovie.value.title && newMovie.value.year) {
        emits('add-movie', { ...newMovie.value }); // 触发添加事件
        // 清空输入
        newMovie.value.title = '';
        newMovie.value.year = '';
        newMovie.value.director = '';
        newMovie.value.genre = '';
    } else {
        alert('添加电影信息不能为空！')
    }
};
</script>
<style scoped>
/* 容器样式 */
.movie-add-container {
    background-color: #f4f4f9;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 24px;
}

/* 输入组样式 */
.input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

/* 输入框样式 */
.input-field {
    flex: 1;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
}

/* 添加按钮样式 */
.add-button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-button:hover {
    background-color: #218838;
}
</style>